<template>
  <div class="did-h">
    <div class="black black-h">
      <div>KYC上传</div>
      <el-row :gutter="20" class="mt3">
        <el-col :span="10" :offset="6">
          <el-form label-position="right" label-width="100px" :model="form" :disabled="isFormDisabled">
            <el-form-item label="用户名">
              <el-input v-model="form.name" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="士兵号">
              <el-input v-model="form.number" placeholder="士兵号"></el-input>
            </el-form-item>
          </el-form>
          <el-row>
            <el-col :span="5">
              <div class="upload-button">
                <el-upload class="upload" ref="upload" action="string" :file-list="fileList" :auto-upload="false" :http-request="uploadFile" :on-change="handleChange" :on-preview="handlePreview" :on-remove="handleRemove" multiple="multiple">
                  <el-button slot="trigger" size="small" type="primary" @click="delFile">选取文件</el-button>
                </el-upload>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="submit-button">
                <el-button type="primary" @click="onSubmit">保存</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <div class="did-button">
        <el-button size="medium" type="primary" @click="uploadFile">上传文件</el-button>
      </div>
    </div>

    <div>
      <el-dialog title="第一次请修改密码" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :show-close="false">
        <el-row :gutter="24" class="mt3">
          <el-col :span="20" :offset="1">
            <el-form label-position="right" label-width="80px" ref="formRef">
              <el-form-item label="旧密码">
                <el-input v-model="form.oldPassword" placeholder="请输入旧密码"></el-input>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input v-model="form.newPassword" placeholder="请输入您想修改的密码"></el-input>
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input v-model="form.confirmPassword" placeholder="请再次输入新的密码"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <div class="did-button">
          <el-button size="medium" type="primary" @click="submitForm">提交</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="审核" :visible.sync="kycdialogVisible" width="30%" :close-on-click-modal="false" :show-close="false">
        <div class="kyc">
          <span>请等待KYC审核</span>
          <el-button size="medium" type="primary" @click="submitForm1">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
  
  <script>
import NoData from '../../../src/components/noData.vue';

export default {
  created() {
    //判断是否为第一次登录
    let kyc_status = localStorage.getItem('kyc_status');
    if (kyc_status == 1) {
      this.isFormDisabled = true;
      this.kycdialogVisible = true;
    }
  },
  components: {
    NoData,
  },
  data() {
    return {
      activeName: 'first',
      form: {
        name: '',
        number: '',
      },
      data: '',
      fileList: [],
      multiple: false,
      formData: '',
      kycdialogVisible: false,
      //表单是否可用
      isFormDisabled: false,
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
    };
  },
  mounted() {},
  methods: {
    async uploadFile() {
      let formData = new FormData();
      formData.append('name', this.form.name);
      formData.append('number', this.form.number);
      formData.append('uploadFile', this.fileList[0].raw);

      try {
        const res = await this.$http.post('http://localhost:8081/kyc/uploadkyc', formData);
        console.info(res);
        if (res === true) {
          this.$notify({
            title: '成功',
            message: '上传成功',
            type: 'success',
            duration: 1000,
          });
          window.localStorage.setItem('kyc_status',1);
          //刷新页面
          location.reload(); // 刷新当前页面
        } else {
          this.$notify({
            title: '失败',
            message: res.data,
            type: 'error',
            duration: 1000,
          });
        }
      } catch (error) {
        this.$notify({
          title: '错误',
          message: '上传出错',
          type: 'error',
          duration: 1000,
        });
        console.error(error);
      }
    },
    async onSubmit() {
      // 在这里处理表单提交逻辑，调用 uploadFile 方法来上传文件
      await this.uploadFile();
    },
    delFile() {
      this.fileList = [];
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    //认证中
    submitForm1() {
      this.$router.push({
        // 推送方法
        path: '/UserInformation', //导航的路径
      });
    },
  },
};
</script>
  
  <style lang="less" scoped>
.did-content {
  margin-top: 10%;
  h1 {
    color: #666666;
    width: 320px;
    margin: 0 auto;
  }
}

.did-button {
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}

.m-a0 {
  margin: 0 auto;
}

.black-h {
  height: 50%;
}

.black-height {
  height: calc(50% - 90px);
}

.nodata {
  margin-top: 10%;
}

.did-width {
  width: 500px;
  margin: 0 auto;
}

.text-c {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}

.update {
  // text-align: center;
  // margin-left: -0%; /* 调整到左边的位置 */
}

.upload-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.upload-button {
  width: 800px;
}

.kyc {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px; /* 设置你希望的字体大小 */
  height: 100%; /* 可选：如果你希望容器撑满整个高度 */
}

.kyc {
  display: flex;
  align-items: center;
}
.kyc {
  display: flex;
  align-items: center;
}
.kyc span {
  flex: 1;
  display: flex;
  justify-content: center;
}
.kyc .el-button {
  margin-left: 10px; /* 可调整按钮和文本之间的距离 */
}

.did-button2 {
  width: 100px;
  margin: 100 auto;
  margin-top: 20px;
  margin-left: 400px;
}
</style>